<!-- 搜索表单 -->
<template>
  <div>
    <el-form :inline="true" :model="searchForm" ref="searchForm">
      <el-form-item label="城市" prop="companyCityCode">
        <el-select v-model.trim="searchForm.companyCityCode" filterable>
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in cityOptions"
            :key="index"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称：" prop="companyName">
        <el-input v-model.trim="searchForm.companyName" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="新建时间：">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态：" prop="status">
        <el-select v-model.trim="searchForm.status">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in approvalStatusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限：">
        <el-select multiple v-model.trim="competence" style="min-width:240px;">
          <el-option
            v-for="(item,index) in competenceOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="$emit('searchList',1,searchForm)">查询</el-button>
      <el-button type="primary" @click="resetFields()">重置</el-button>
      <el-button type="primary" @click="$emit('add')">新增</el-button>
      <el-button type="primary" @click="$emit('push')">导入</el-button>
    </el-form>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
export default {
  data() {
    return {
      time: [],
      competence: [],
      //   searchForm: {
      //     companyCityCode: "",
      //     companyName: "",
      //     strTime: "",
      //     endTime: "",
      //     status: "",
      //     house: "",
      //     insurance: "",
      //     property: ""
      //   },
      cityOptions: [], //城市
      approvalStatusOptions: [
        { label: "未合作", value: "0" },
        { label: "合作中", value: "2" },
        { label: "审核中", value: "1" },
        { label: "审核不通过", value: "3" }
        // { label: "合作终止", value: "4" }qudia
      ], //审核状态
      competenceOptions: [
        { label: "新房", value: "house" },
        { label: "保险", value: "insurance" },
        { label: "产权", value: "property" }
      ] ///权限
    };
  },
  props: ["searchForm"],
  created() {
    this.getCity();
  },
  methods: {
    //获取城市
    getCity() {
      this.axios.post(api.CITYLIST).then(res => {
        if (res.data.code == 200) {
          this.cityOptions = res.data.data.cityList;
        }
      });
    },
    resetFields() {
      this.$refs.searchForm.resetFields();
      this.time = [];
      this.competence = [];
    }
  },
  watch: {
    competence(val) {
      this.competenceOptions.forEach(({ value }) => {
        if (val.includes(value)) {
          this.searchForm[value] = "1";
        } else {
          this.searchForm[value] = "";
        }
      });
    },
    time(val) {
      if (val) {
        this.searchForm.strTime = utils.getTimeString(val[0]).slice(0, 10);
        this.searchForm.endTime = utils.getTimeString(val[1]).slice(0, 10);
      } else {
        this.searchForm.strTime = "";
        this.searchForm.endTime = "";
      }
    }
  }
};
</script>

<style lang="stylus"></style>
